<!-- 在templates目录下创建 product/index.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>二手市场</title>
	<!-- 引入若依默认样式和脚本 -->
	<th:block th:include="include :: header"/>
	<style>
		.product-card {
			transition: all 0.3s;
			margin-bottom: 20px;
		}
		.product-card:hover {
			transform: translateY(-5px);
			box-shadow: 0 5px 15px rgba(0,0,0,.1);
		}
		.product-img {
			height: 200px;
			object-fit: cover;
		}
		.price-tag {
			color: #ff5000;
			font-size: 1.5rem;
			font-weight: bold;
		}
		.search-box {
			background: #f5f5f5;
			padding: 20px;
			border-radius: 8px;
			margin-bottom: 30px;
		}
	</style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
	<!-- 头部导航 -->
	<th:block th:include="include :: top-nav"/>

	<div class="content-wrapper">
		<section class="content-header">
			<h1>二手交易市场</h1>
		</section>

		<section class="content">
			<!-- 搜索筛选区域 -->
			<div class="search-box">
				<form id="searchForm">
					<div class="row">
						<div class="col-md-3">
							<input type="text" name="name" class="form-control" placeholder="商品名称">
						</div>
						<div class="col-md-3">
							<select name="categoryId" class="form-control">
								<option value="">所有分类</option>
								<!-- 动态加载分类 -->
								<option th:each="c : ${categories}"
										th:value="${c.id}"
										th:text="${c.name}"></option>
							</select>
						</div>
						<div class="col-md-2">
							<button type="button" class="btn btn-primary btn-block" onclick="loadProducts()">
								<i class="fa fa-search"></i> 搜索
							</button>
						</div>
					</div>
				</form>
			</div>

			<!-- 商品展示区域 -->
			<div class="row" id="productList"></div>

			<!-- 分页控件 -->
			<div class="row">
				<div class="col-md-12">
					<div id="pagination" class="text-center"></div>
				</div>
			</div>
		</section>
	</div>
</div>

<!-- 商品卡片模板（隐藏） -->
<script type="text/template" id="productTemplate">
	<div class="col-md-3">
		<div class="product-card">
			<div class="thumbnail">
				<img src="{{imgUrl}}" class="product-img" alt="{{name}}">
				<div class="caption">
					<h4>{{name}}</h4>
					<p class="text-muted">{{category}}</p>
					<div class="price-tag">¥{{price}}</div>
					<p>卖家：{{owner}}</p>
					<button class="btn btn-success btn-block" onclick="viewDetail({{id}})">
						<i class="fa fa-cart-plus"></i> 立即购买
					</button>
				</div>
			</div>
		</div>
	</div>
</script>

<th:block th:include="include :: footer"/>
<script>
	// 页面初始化加载商品
	$(function() {
		loadProducts();
	});

	// 加载商品列表
	function loadProducts(pageNum = 1) {
		$.ajax({
			url: ctx + "system/product/list",
			type: "POST",
			data: $.extend({
				pageNum: pageNum,
				pageSize: 8
			}, $("#searchForm").serializeObject()),
			success: function(res) {
				renderProducts(res.rows);
				renderPagination(res.total, pageNum);
			}
		});
	}

	// 渲染商品卡片
	function renderProducts(products) {
		const template = $("#productTemplate").html();
		const html = products.map(p => {
			return template.replace(/{{(.*?)}}/g, (m, p1) => p[p1]);
		}).join('');
		$("#productList").html(html);
	}

	// 渲染分页
	function renderPagination(total, current) {
		$("#pagination").pagination({
			total: total,
			pageSize: 8,
			current: current,
			callback: loadProducts
		});
	}

	// 查看详情（需补充实现）
	function viewDetail(id) {
		// window.location.href = ctx + "system/product/detail/" + id;
		alert("商品详情功能待实现 - ID:" + id);
	}
</script>
</body>
</html>